<template>
    <div class="vipCont" :style="'min-height: '+docheight+'px'">
      <div  v-if="!showTimeOut">
        <div class="bannerCont">
          <img src="static/img/userMoneyBanner.png">
          <div class="maskCont">
            <div class="userInfo">
                <div class="userImg">
                    <img :src="moneyData.head_img+ossSrc" />
                </div>
                <div class="userInfoDes">
                    <div class="userInfoName">{{ moneyData.nick_name }}</div>
                    <div class="userInfoDesItem">账户余额：{{ moneyData.balance }}元</div>
                </div>
            </div>
          </div>
        </div>
        <div class="buyVipCont">
          <div class="buyVipTop">
            <div class="buyVipTopVal">充值余额</div>
          </div>
          <div class="buyNavCont">
            <div @click="navFn(item)" :class="index%3==0?'noLeft buyItem':'buyItem'" :key="index" v-for="(item,index) in moneyData.balance_set">
                <div :class="packId==item.balance_recharge_set_id?'buyItemInfo itemActive':'buyItemInfo'">
                  <div class="buyImg">
                      <img src="static/img/yue.png" />
                  </div>
                  <div class="buyMoney">¥{{ parseInt(item.balance_recharge_money) }}</div>
                  <div class="buyMoneyDes">赠送{{ parseInt(item.gifts_money) }}元</div>
                </div>
            </div>
          </div>
        </div>
        <div class="openCont">
          <div class="openTop">充值记录</div>
          <div :class="index==0?'openList noBorder':'openList'" :key="index" v-for="(item,index) in recordArr">
            <div class="openLeft">
                <div class="openNum">
                  <div>订单号:{{ item.order_number }}</div>
                  <div class="openMoney greenText">+{{ item.money }}</div>
                </div>
                <div class="openTime">
                  <div>{{ item.create_time }}</div>
                  <div class="endMoney">赠{{ item.gifts_money }}元</div>
                </div>
            </div>
          </div>
          <div class="loadMore" v-if="recordArr.length==0">暂无充值记录～</div>
        </div>
        <div class="sureBtn" @click="payfn">充值余额</div>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
      </div>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
    import topcpm from '@/components/topcpm.vue'
    import {balanceRechargePay,balanceRecharge,balanceRechargeShow} from "@/http/api";
    import {Toast } from 'vux'
    import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    import WeixinJSBridge from 'weixin-js-sdk'
  
  export default {
    components: {getLoad,getTimeOut,topcpm,Toast},
    data() {
      return {
        showTimeOut: false,
        showCont:true,
        showText:'',
        showToast:false,
        recordArr:[],
        moneyData:{
          balance_set:[]
        },
        packId:1,
      }
    },
    props: {},
    methods: {
      navFn(item){
        this.packId = item.balance_recharge_set_id
      },
      payfn(){
        var data = {
          balance_recharge_set_id:this.packId,
        }
        balanceRechargePay(data).then((res)=>{
          if(res.data.code==1){
            this.wxPayFn(res)
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
        })
      },
      wxPayFn(res){
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
          appId: res.data.data.appId,   //公众号ID，由商户传入    
          timeStamp: res.data.data.timeStamp,   //时间戳，自1970年以来的秒数    
          nonceStr: res.data.data.nonceStr,      //随机串    
          package: res.data.data.package,
          signType: res.data.data.signType,     //微信签名方式：    
          paySign: res.data.data.paySign, //微信签名
        },
        (resData)=>{
            if (resData.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                this.showToast = true
                this.showText = '充值成功'
                this.getData()
              }else{
                this.showToast = true
                this.showText = '充值失败'
              }
        })
      },
      checkPayFn(index){
        this.checkPayId = index
      },
      getData(){
        balanceRecharge().then((res)=>{
          if(res.data.code==1){
              this.recordArr = res.data.data
            }else{
            this.showToast = true
            this.showText = '用户信息获取失败'
            }
            this.showCont= true
        }).catch(()=>{
          this.showTimeOut = true
          this.showCont= true
          })
      },
      getMenberList(){
        balanceRechargeShow().then((res)=>{
          if(res.data.code==1){
            this.moneyData = res.data.data
            this.packId = res.data.data.balance_set[0].balance_recharge_set_id
          }else{
            this.showToast = true
            this.showText = res.data.msg
            }
        }).catch(()=>{
            this.showTimeOut = true
            this.showCont= true
          })
      },
    },
    mounted() {
    },
    created() {
        this.getData()
        this.getMenberList()
    },
  }
  </script>
  
  <style scoped lang="less">
  .vipCont{
    width: 100%;
    background-color: #f9f1f1;
    padding-bottom: 1.5rem;
    box-sizing: border-box;
    .bannerCont{
      width: 100%;
      box-sizing: border-box;
      font-size: 0;
      position: relative;
      img{
        width: 100%;
        border-radius: 0.25rem;
      }
      .maskCont{
        position: absolute;
        left: 0;
        top: 0;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 0.6rem;
        color: #643F10;
        // background-color: rgba(255, 255, 255, 0.5);
        .userInfo{
            display: flex;
            align-items: center;
            padding: 0.5rem;
            border-radius: 0.5rem;
            box-sizing: border-box;
            color: #fff;
            .userImg{
                height: 2.5rem;
                border: 3px solid #fff;
                border-radius: 50%;
                margin-right: 0.75rem;
                width: 2.5rem;
                font-size: 0;
                img{
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .userInfoDes{
                height: 2.5rem;
                // padding: 0.15rem 0;
                box-sizing: border-box;
                .userInfoName{
                    font-size: 1rem;
                    margin-bottom: 0.25rem;
                }
            }
        }
      }
    }
    .buyVipCont{
      width: 92%;
      margin: 1.5rem auto;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      border-radius: 0.5rem;
      background-color: #fff;
      .buyVipTop{
        width: 100%;
        display: flex;
        align-items: center;
        .buyVipTopVal{
          font-size: 0.8rem;
          font-weight: bold;
        }
      }
      .buyNavCont{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 0.75rem;
        .buyItem{
            width: 31%;
            text-align: center;
            margin-left: 3.5%;
            margin-bottom: 0.75rem;
            .buyItemInfo{
              width: 100%;
              background-color: #f7f7f7;
              padding: 0.75rem 0;
              border-radius: 0.75rem;
              .buyImg{
                  width: 100%;
                  text-align: center;
                  img{
                      width: 1.5rem;
                  }
              }
              .buyMoney{
                  margin: 0.25rem 0;
                  font-size: 1.2rem;
              }
              .buyMoneyDes{
                  font-size: 0.6rem;
                  color: #fa8f91;
              }
            }
            .itemActive{
              background-color: #fa8f91;
              color: #fff;
              .buyMoneyDes{
                color: #fff;
              }
            }
            
        }
        .noLeft{
            margin-left: 0;
        }
      }
    }
    .payType{
      width: 92%;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      border-radius: 0.5rem;
      margin: 1.5rem auto;
      background-color: #fff;
      .payTop{
        font-size: 0.8rem;
        font-weight: bold;
      }
      .payItem{
        width: 100%;
        display: flex;
        box-sizing: border-box;
        margin-top: 0.75rem;
        align-items: center;
        display: flex;
        .payName{
          flex: 1;
          width: 0.5rem;
          font-size: 0.7rem;
          margin: 0 0.75rem;
          color: #e95551;
        }
        .payTypeIcon{
          font-size: 1.75rem;
          color: #28C445;
        }
        .payCheck,.unpayCheck{
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
          background-color:#e95551;
          color: white;
          font-size: 0.7rem;
          text-align: center;
          line-height: 1rem;
        }
        .unpayCheck{
          background-color: rgb(230,230,230);
        }
      }
    }
    .openCont{
        width: 92%;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        border-radius: 0.5rem;
        margin: 1.5rem auto;
        background-color: #fff;
        .openTop{
            font-size: 0.8rem;
            font-weight: bold;
        }
        .openList{
          width: 100%;
          padding: 0.75rem 0;
          box-sizing: border-box;
          border-top: 1px dashed #ebebeb;
          .openNum{
              flex: 1;
              font-weight: bold;
              margin-bottom: 0.25rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .openMoney{
                font-weight: normal;
                color: #e95551;
                font-size: 0.8rem;
              }
              .greenText{
                color: #85CE61;
              }
          }
          .openTime{
              color: #666;
              font-size: 0.6rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .endMoney{
                // color: #3bde3e;
              }
          }
      }
        .noBorder{
            border-top: none;
        }
        .loadMore{
          color: #999;
          font-size: 0.6rem;
          text-align: center;
          padding: 0.75rem 0;
        }
    }
    .sureBtn{
      width: 92%;
      line-height: 2.2rem;
      background-color: #e95551;
      position: fixed;
      bottom: 0.75rem;
      left: 4%;
      text-align: center;
      color: white;
      box-shadow: 0 0 0.75rem #FCF8F2;
      border-radius: 0.25rem;
    }
  }
  </style>
  